<template>
  <div class="column-scroll">
    <el-card class="info-card">
      <div class="project-info">
        <div class="info-item">
          <span class="info-label">项目描述</span>
          <p class="info-value">{{ project?.description || '暂无描述' }}</p>
        </div>
        <div class="info-item">
          <span class="info-label">项目状态</span>
          <el-tag :type="getStatusType(project?.status || '')">
            {{ getStatusText(project?.status || '') }}
          </el-tag>
        </div>
        <div class="info-item">
          <span class="info-label">项目优先级</span>
          <el-tag :type="getPriorityType(project?.priority || '')">
            {{ getPriorityText(project?.priority || '') }}
          </el-tag>
        </div>
        <div class="info-item">
          <span class="info-label">项目类型</span>
          <span class="info-value">{{ getCategoryText(project?.category || '') }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">创建者</span>
          <span class="info-value">{{ project?.created_by_name || '未知' }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">创建时间</span>
          <span class="info-value">{{ formatDate(project?.created_at || '') }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">更新时间</span>
          <span class="info-value">{{ formatDate(project?.updated_at || '') }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">项目周期</span>
          <span class="info-value">
            {{ formatDate(project?.start_date || '') }} 至 {{ formatDate(project?.end_date || '') }}
          </span>
        </div>
        <div class="info-item">
          <span class="info-label">预估工时</span>
          <span class="info-value">{{ project?.estimated_hours ?? 0 }} 小时</span>
        </div>
        <div class="info-item">
          <span class="info-label">项目预算</span>
          <span class="info-value">￥{{ project?.budget ?? 0 }}</span>
        </div>
      </div>
    </el-card>

    <el-card class="info-card">
      <template #header>
        <div class="card-header">
          <span>项目成员 ({{ projectMembers.length }})</span>
          <el-button 
            v-if="canManageMembers"
            size="small" 
            type="text" 
            @click="$emit('manage-members')"
          >
            <el-icon><User /></el-icon>
            管理
          </el-button>
        </div>
      </template>

      <div class="members-list">
        <div v-for="member in projectMembers" :key="member.id" class="member-item">
          <UserDisplay
            :userId="member.user_id || member.id"
            :userName="member.name || member.user_name || member.username"
            :userAvatar="member.user_avatar || member.avatar"
            :size="'medium'"
            :showAvatar="true"
          />
          <div class="member-info">
            <div class="member-role">{{ member.role_label || member.role || '未知角色' }}</div>
          </div>
        </div>
        <div v-if="projectMembers.length === 0" class="empty-members">
          暂无项目成员
        </div>
      </div>
    </el-card>

    <el-card class="info-card">
      <template #header>
        <div class="card-header">
          <span>项目标签</span>
        </div>
      </template>

      <div class="project-tags-list">
        <el-tag v-for="tag in project?.tags || []" :key="tag" class="tag-item">
          {{ tag }}
        </el-tag>
        <div v-if="!project?.tags || project.tags.length === 0" class="empty-members">暂无标签</div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { PropType } from 'vue'
import { User } from '@element-plus/icons-vue'
import UserDisplay from '@/components/ui/UserDisplay.vue'
import { usePermission } from '@/hooks/usePermission'
import {
  formatDate,
  getStatusType,
  getStatusText,
  getPriorityType,
  getPriorityText,
  getCategoryText
} from '../utils'

defineProps({
  project: {
    type: Object as PropType<Record<string, any> | null>,
    default: null
  },
  projectMembers: {
    type: Array as PropType<Array<Record<string, any>>>,
    default: () => []
  }
})

defineEmits(['manage-members'])

// 权限检查
const { hasPermission, hasRole } = usePermission()

// 检查是否有成员管理权限（管理员或项目管理员）
const canManageMembers = computed(() => {
  // 检查权限
  if (hasPermission('project:manage_members') || hasPermission('PROJECT_MANAGE_MEMBERS')) {
    return true
  }
  // 检查角色：管理员或项目管理员
  if (hasRole('admin') || hasRole('project_manager')) {
    return true
  }
  return false
})
</script>

<style scoped>
.column-scroll {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  padding-right: 8px;
}

.column-scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.column-scroll::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

.column-scroll::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
  transition: background 0.2s ease;
}

.column-scroll::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.info-card {
  margin-bottom: 20px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
  overflow: hidden;
}

.info-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

:deep(.el-card__header) {
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding: 16px 20px;
  font-weight: 600;
  color: #1e293b;
}

:deep(.el-card__body) {
  padding: 20px;
}

.project-info {
  padding: 4px 0;
}

.info-item {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

.info-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.info-item:hover {
  padding-left: 4px;
}

.info-label {
  display: block;
  font-size: 13px;
  color: #64748b;
  margin-bottom: 8px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.info-value {
  font-size: 15px;
  color: #1e293b;
  margin: 0;
  font-weight: 500;
  line-height: 1.6;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header :deep(.el-button) {
  color: #64748b;
  font-weight: 500;
  transition: all 0.2s ease;
}

.card-header :deep(.el-button):hover {
  color: #409eff;
  transform: translateX(2px);
}

.members-list {
  padding: 4px 0;
}

.member-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 12px;
  border-radius: 10px;
  transition: all 0.2s ease;
  cursor: pointer;
  gap: 12px;
}

.member-item:hover {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.member-item:last-child {
  margin-bottom: 0;
}

:deep(.el-avatar) {
  border: 2px solid #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.member-item:hover :deep(.el-avatar) {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.member-info {
  flex-shrink: 0;
  text-align: right;
}

.member-role {
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
  margin-top: 4px;
}

.empty-members {
  text-align: center;
  padding: 48px 20px;
  color: #94a3b8;
  font-size: 14px;
}

.project-tags-list {
  padding: 4px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tag-item {
  margin-bottom: 0;
  border-radius: 6px;
  padding: 6px 12px;
  font-weight: 500;
  transition: all 0.2s ease;
  cursor: pointer;
}

.tag-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .info-item {
    margin-bottom: 16px;
    padding-bottom: 12px;
  }

  .member-item {
    padding: 10px;
  }
}
</style>

